<!-- 个性推荐 -->
<template>
	<Banner></Banner>
	<Recommend>
		<template #title>
			<div>
				推荐歌单
				<right-outlined />
			</div>
		</template>
		<template #list>
			<Resourcelist :resourcelist="resourcelist"></Resourcelist>
		</template>
	</Recommend>
	<Recommend>
		<template #title>
			<div>
				精品歌单
				<right-outlined />
			</div>
		</template>
		<template #list>
			<Resourcelist :resourcelist="fineResource"></Resourcelist>
		</template>
	</Recommend>
</template>

<script lang="ts" setup>
import Banner from '@/components/banner.vue'
import Recommend from '@/components/resource.vue'
import Resourcelist from '@/components/resourcelist.vue'
import { onMounted, ref } from 'vue';
import { type IGetEverydayRecommendResource, type IEverydayRecommendResource, getEverydayRecommendResourceApi, getFineResourceApi } from '@/api/recommendApi'
import { RightOutlined } from '@ant-design/icons-vue';

const resourcelist = ref<IGetEverydayRecommendResource[]>([])
const getEverydayRecommendResource = async () => {
	const res = await getEverydayRecommendResourceApi()
	res.recommend.forEach(item => {
		resourcelist.value.push(item)
	})
}

const fineResource = ref<IEverydayRecommendResource[]>([])
const getFineResource = async () => {
	const res = await getFineResourceApi()
	console.log(res);
	res.playlists.forEach(item => {
		fineResource.value.push({
			id: item.id,
			picUrl: item.coverImgUrl as string,
			playcount: item.playCount,
			name: item.name
		})
	})
}

onMounted(() => {
	getEverydayRecommendResource()
	getFineResource()
})

</script>